<template>
  <div>
    <a-table :columns="columns" :data-source="data">
      <span slot="id" slot-scope="id">
        <a-tag color="#108ee9">
          {{ id }}
        </a-tag>
      </span>
      <span slot="tags" slot-scope="tags">
        <a-tag v-for="tag in tags" :key="tag" color="green">
          {{ tag }}
        </a-tag>
      </span>
      <span slot="fee" slot-scope="fee">
        <h3>
          ¥ <strong>{{ fee }}</strong>
        </h3>
      </span>
      <span slot="action">
        <a-tooltip>
          <template slot="title">
            {{ btitle_0 }}
          </template>
          <a-button type="danger" :disabled="ispay">删除</a-button>
        </a-tooltip>
        <a-divider type="vertical" />
        <a-tooltip>
          <template slot="title">
            {{ btitle_1 }}
          </template>
          <a-button type="primary" :disabled="ispay">优化</a-button>
        </a-tooltip>
      </span>
    </a-table>
    <div
      style="
        width: 100%;
        height: 50%;
        bottom: 7%;
        z-index: 99;
        position: absolute;
      "
    >
      <router-view @isPay="confirmPay" />
    </div>
    <!-- -->
  </div>
</template>

<script>
import global from '@/common/global.js'
import moment from 'moment'
const columns = [
  {
    title: '实例ID',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '费用',
    dataIndex: 'fee',
    key: 'fee',
    scopedSlots: { customRender: 'fee' },
  },
  {
    title: '优化建议',
    dataIndex: 'advice',
    key: 'advice',
  },
  {
    title: '类型',
    key: 'tags',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
]

const data = [
  {
    key: '1',
    id: global.randomStr(18),
    fee: '320',
    advice: '闲置类型',
    tags: ['ECS'],
  },
  {
    key: '2',
    id: global.randomStr(18),
    fee: '420',
    advice: '闲置类型',
    tags: ['大数据'],
  },
  {
    key: '3',
    id: global.randomStr(18),
    fee: '550',
    advice: '性能过剩',
    tags: ['云计算'],
  },
  {
    key: '4',
    id: global.randomStr(18),
    fee: '620',
    advice: '闲置类型',
    tags: ['ECS'],
  },
  {
    key: '5',
    id: global.randomStr(18),
    fee: '440',
    advice: '闲置类型',
    tags: ['ECS'],
  },
  {
    key: '6',
    id: global.randomStr(18),
    fee: '550',
    advice: '性能过剩',
    tags: ['对象存储'],
  },
  {
    key: '7',
    id: global.randomStr(18),
    fee: '1490',
    advice: '闲置类型',
    tags: ['数据库'],
  },
]
export default {
  data() {
    return {
      data,
      columns,
      ispay: true,
      btitle_0: '支付后解锁',
      btitle_1: '支付后解锁',
      likes: 100,
      dislikes: 8,
      action: null,
      moment,
      visible: false,
    }
  },
  methods: {
    confirmPay() {
      this.ispay = false
      this.btitle_0 = '谨慎使用'
      this.btitle_1 = '一键优化'
      this.$router.push({ name: this.$global.config.advice })
    },
  },
}
</script>

<style scoped></style>
